<template>
    <div class="setting-url">
        <vxe-toolbar ref="urlToolbar" custom export>
            <template #buttons>
                <a-button type="primary" @click="editOpen(undefined)">{{ $t('common.operation.add') }}</a-button>
            </template>
            <template #tools>
                <a-input v-model="condition.name" :placeholder="$t('common.keyword.name')"
                    style="margin-right: 10px;"></a-input>
            </template>
        </vxe-toolbar>
        <vxe-table ref="urlTable" :data="showUrls" class="data" :column-config="columnConfig" :export-config="exportConfig">
            <vxe-column type="seq" width="50" :title="$t('common.keyword.index')" fixed="left"></vxe-column>
            <vxe-column field="name" :title="$t('common.keyword.name')" width="180" fixed="left"></vxe-column>
            <vxe-column field="value" :title="$t('common.keyword.url')">
                <template #default="{ row }">
                    <a-link @click="open(row.value)" type="primary" target="_blank">{{ row.value }}</a-link>
                    <div class="url-copy" @click="execCopy(row.value)">{{ $t('common.operation.copy') }}</div>
                </template>
            </vxe-column>
            <vxe-column field="version" title="版本" width="180" />
            <vxe-column field="updateTime" :title="$t('setting.link.form.updateTime')" width="160"
                :formatter="prettyDate" />
            <vxe-column field="isAuth" :title="$t('setting.link.form.isAuth')" width="120" :formatter="prettyAuth" />
            <vxe-column field="authUser" :title="$t('setting.link.form.authUser')" :visible="false" />
            <vxe-column field="authPassword" :title="$t('setting.link.form.authPassword')" :visible="false" />
            <vxe-column :title="$t('common.keyword.operation')" width="150" fixed="right">
                <template #default="{ row }">
                    <a-button type="primary" size="small" @click="editOpen(row)">{{ $t('common.operation.edit') }}
                    </a-button>
                    <a-button type="primary" status="danger" size="small" @click="remove(row.id, row.value)"
                        style="margin-left: 8px;">
                        {{ $t('common.operation.delete') }}
                    </a-button>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
</template>
<script lang="ts">
import { defineComponent, toRaw } from "vue";
import { mapState } from "pinia";
import { toDateString } from "xe-utils";
import { VxeTableDefines, VxeTableInstance, VxeTablePropTypes, VxeToolbarInstance } from "vxe-table";

import useUrlStore from "@/store/UrlStore";
import useIndexStore from "@/store/IndexStore";
import Url from "@/entity/Url";

// 组件
import JsonDialog from "@/components/JsonDialog.vue";

import { nativeStrategyContext, urlService, useUrlEditEvent } from "@/global/BeanFactory";
import BrowserUtil from "@/utils/BrowserUtil";
import MessageUtil from "@/utils/MessageUtil";
import MessageBoxUtil from "@/utils/MessageBoxUtil";

interface Params {
    cellValue: any
    column: VxeTableDefines.ColumnInfo
    row: any
}

export default defineComponent({
    name: 'setting-url',
    components: { JsonDialog },
    data: () => ({
        condition: {
            name: '',
            url: ''
        },
        url: {
            name: '',
            value: 'http://',
            sequence: 0,
            isAuth: false,
            authUser: '',
            authPassword: '',
            version: ''
        } as Url,
        columnConfig: {
            resizable: true
        },
        exportConfig: {
            filename: 'elasticsearch链接',
            sheetName: 'elasticsearch链接',
            columns: [{
                field: 'name'
            }, {
                field: 'value'
            }, {
                field: 'isAuth'
            }, {
                field: 'authUser'
            }, {
                field: 'authPassword'
            }],
            // 自定义类型
            types: ['csv', 'html', 'xml', 'txt']
        } as VxeTablePropTypes.ExportConfig
    }),
    computed: {
        ...mapState(useUrlStore, ['urls']),
        showUrls() {
            return this.urls.filter(url => this.condition.name === '' || (url.name && url.name.indexOf(this.condition.name) > -1))
        }
    },
    mounted() {
        let urlTable = this.$refs['urlTable'] as VxeTableInstance;
        let urlToolbar = this.$refs['urlToolbar'] as VxeToolbarInstance;
        this.$nextTick(() => {
            urlTable.connect(urlToolbar);
        });
    },
    methods: {
        prettyDate(params: Params) {
            return toDateString(params.cellValue, "yyyy-MM-dd HH:mm:ss");
        },
        prettyAuth(params: Params) {
            return params.cellValue ? this.$t('setting.link.form.needAuth') : this.$t('setting.link.form.notAuth');
        },
        remove(id: number, value: string) {
            MessageBoxUtil.confirm('是否删除相关的搜索历史', '提示', {
                confirmButtonText: '删除全部',
                cancelButtonText: '只删除链接'
            }).then(() => {
                this.execRemove(id, true)
                    .then(() => this.removeAfter(value))
                    .catch(e => MessageUtil.error('删除失败', e));
            }).catch((action) => {
                if (action === 'cancel') {
                    this.execRemove(id, false)
                        .then(() => this.removeAfter(value))
                        .catch(e => MessageUtil.error('删除失败', e));
                }
            })
        },
        execRemove(id: number, removeAll: boolean): Promise<void> {
            if (removeAll) {
                return urlService.deleteAllById(id);
            } else {
                return urlService.deleteById(id);
            }
        },
        removeAfter(value: string) {
            MessageUtil.success('删除成功');
            if (useUrlStore().current === value) {
                // 删除了当前索引
                useUrlStore().clear();
                useIndexStore().clear();
            }
            useUrlStore().reset();
            useIndexStore().reset();
        },
        editOpen(url?: Url) {
            if (url) {
                useUrlEditEvent.emit(JSON.parse(JSON.stringify(toRaw(url))));
            } else {
                useUrlEditEvent.emit();
            }
        },
        execCopy: BrowserUtil.copy,
        open(url: string) {
            nativeStrategyContext.getStrategy().openLink(url);
        }
    }
});
</script>
<style lang="less">
.setting-url {
    .url-copy {
        display: inline;
    }
}
</style>